<script>
import { ref, watch, h, shallowRef, inject } from "vue";
import { theme, Tooltip } from 'ant-design-vue';

import Cells from '../Component/Cells/index.vue'
import OutlineTree from './OutlineTree.vue'
import DataSet from '../Component/DataSet/index.vue'
import Logic from '../Component/Logic/index.vue'
import OnlineJS from '../Component/OnlineJS/index.vue'

export default {
    emits: ['update:left'],
    setup(props, { emit }) {
        const { token } = theme.useToken();
        const Active = ref(null);
        const StateEvent = inject('StateEvent');
        const Menu = ref([
            { key: 'Cells', Comp: shallowRef(Cells), icon: "&#xe6ce;", title: '元件库', width: 350 },
            { key: 'OutlineTree', Comp: shallowRef(OutlineTree), icon: "&#xe71f;", title: '大纲树', width: 400 },
            { key: 'DataSet', Comp: shallowRef(DataSet), icon: "&#xe6f3;", title: '数据源', width: 350 },
            { key: 'Logic', Comp: shallowRef(Logic), icon: "&#xe69e;", title: '执行逻辑', width: 550 },
            { key: 'OnlineJS', Comp: shallowRef(OnlineJS), icon: "&#xe776;", title: '在线JS代码', width: 550 },
        ]);

        const ActiveEvent = function (item) {
            if (item === Active.value) {
                Active.value = null;
            } else {
                Active.value = item;
            };

            setTimeout(() => {
                StateEvent.RefreshActiveBoard();
            }, 201)

        };

        watch(Active, value => {
            if (value) {
                emit('update:left', value.width)
            } else {
                emit('update:left', 48)
            }
        });

        return () => h('div', { class: 'MenuLayout' }, {
            default: () => {
                return [
                    h('div', { class: "MenuBar", style: { 'border-right': '1px solid ' + token.value.colorBorderSecondary, } }, {
                        default: () => {
                            var Child = [];
                            for (let i = 0; i < Menu.value.length; i++) {
                                const element = Menu.value[i];
                                Child.push(
                                    h(Tooltip, { placement: 'right' }, {
                                        title: () => element.title,
                                        default: () => h('div', {
                                            class: 'C-Icon MenuItem ',
                                            onClick: () => ActiveEvent(element),
                                            style: {
                                                color: Active.value === element ? token.value.colorPrimaryBg : token.value.colorTextSecondary,
                                                borderBottom: Active.value === element ? '1px solid ' + token.value.colorPrimaryHover : '1px solid ' + token.value.colorBorderSecondary,
                                                backgroundColor: Active.value === element ? token.value.colorPrimaryHover : ''
                                            },
                                            innerHTML: element.icon
                                        })
                                    })
                                );
                            }
                            return Child
                        }
                    }),
                    Active.value && h('div', { class: "MenuContent", style: { width: Active.value.width - 48 + 'px' } }, [
                        h('div', { class: 'MenuContentLayout' }, h(Active.value.Comp)),
                        h('div', {
                            class: 'MenuTitle', style: {
                                color: token.value.colorTextSecondary,
                                borderBottom: '1px solid ' + token.value.colorBorderSecondary,
                                padding: '0 ' + token.value.padding + 'px'
                            },
                        }, [
                            h('span', Active.value.title),
                            h('span', {
                                class: 'C-Icon CloseButton', style: {
                                    padding: '0 ' + token.value.padding + 'px',
                                    marginRight: '-' + token.value.padding + 'px'
                                },
                                innerHTML: '&#xe622;',
                                onClick: () => {
                                    Active.value = null;
                                    setTimeout(() => {
                                        StateEvent.RefreshActiveBoard();
                                    }, 201)
                                }
                            })
                        ])
                    ])
                ]
            }
        })
    }
}
</script>

<style lang="less" scoped>
.MenuLayout {
    position: relative;
    height: 100%;

    .MenuBar {
        height: 100%;
        width: 48px;
        position: relative;
        user-select: none;
    }

    .MenuContent {
        position: absolute;
        left: 48px;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .MenuItem {
        height: 40px;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        transition: all 0.3s;
    }

    .MenuTitle {
        position: relative;
        width: 100%;
        line-height: 39px;
        display: flex;
        justify-content: space-between;
        user-select: none;
    }

    .CloseButton {
        cursor: pointer;

    }

    .MenuContentLayout {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 40px 0 0 0;
    }
}
</style>